<!-- Filters for testing of multiple grid views -->

<div id="w-common-filters">
  <input name="PostSearch[id]" type="text">
  <input name="PostSearch[name]" type="text">
</div>

<!-- The main setup -->

<div id="w0" class="grid-view">
  <table>
    <thead>
      <tr>
        <th><input id="w0-check-all" name="selection_all" value="1" type="checkbox"></th>
        <th>Name</th>
        <th>Category</th>
        <th>Tags</th>
      </tr>
      <tr id="w0-filters">
        <td>&nbsp;</td>
        <td><input id="w0-name" name="PostSearch[name]" type="text"></td>
        <td>
          <select id="w0-category" name="PostSearch[category_id]">
            <option value="" selected>None</option>
            <option value="1">Programming</option>
            <option value="2">Traveling</option>
          </select>
        </td>
        <td>
          <select id="w0-tags" name="PostSearch[tags][]" multiple>
            <option value="1">html</option>
            <option value="2">css</option>
            <option value="3">js</option>
            <option value="4">php</option>
          </select>
        </td>
      </tr>
    </thead>
    <tbody>
      <tr data-key="1">
        <td><input class="w0-check-row" name="selection[]" value="1" type="checkbox"></td>
        <td>Name 1</td>
        <td>Programming</td>
        <td>html, css</td>
      </tr>
      <tr data-key="2">
        <td><input class="w0-check-row" name="selection[]" value="2" type="checkbox"></td>
        <td>Name 2</td>
        <td>Programming</td>
        <td>js</td>
      </tr>
      <tr data-key="3">
        <td><input class="w0-check-row" name="selection[]" value="3" type="checkbox"></td>
        <td>Name 3</td>
        <td>Programming</td>
        <td>php</td>
      </tr>
      </tbody>
  </table>
</div>

<!-- The basic setup, used for testing of multiple grid views -->

<div id="w1" class="grid-view">
  <table>
    <thead>
      <tr>
        <th><input name="selection_all" value="1" type="checkbox"></th>
        <th>ID</th>
        <th>Name</th>
      </tr>
      <tr id="w1-filters">
        <td>&nbsp;</td>
        <td><input name="PostSearch[id]" type="text"></td>
        <td><input name="PostSearch[name]" type="text"></td>
      </tr>
    </thead>
    <tbody>
      <tr data-key="1">
        <td><input name="selection[]" value="1" type="checkbox"></td>
        <td>1</td>
        <td>Name 1</td>
      </tr>
      <tr data-key="2">
        <td><input name="selection[]" value="2" type="checkbox"></td>
        <td>2</td>
        <td>Name 2</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- https://github.com/yiisoft/yii2/pull/10284 -->

<div id="w2">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Tags</th>
      </tr>
      <tr id="w2-filters">
        <td><input name="PostSearch[name]" type="text"></td>
        <td>
          <input type="hidden" name="PostSearch[tags]" value="-1">
          <select id="w2-tags" name="PostSearch[tags][]" multiple>
            <option value="1">html</option>
            <option value="2">css</option>
            <option value="3">js</option>
            <option value="4">php</option>
          </select>
        </td>
      </tr>
    </thead>
    <tbody>
      <tr data-key="1">
        <td>Name 1</td>
        <td>html, css</td>
      </tr>
      <tr data-key="2">
        <td>Name 2</td>
        <td>js</td>
      </tr>
      <tr data-key="3">
        <td>Name 3</td>
        <td>php</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- Setup for testing that event handlers are correctly removed with new selectors -->

<div id="w3">
  <table>
    <thead>
      <tr>
        <th>
          <input name="selection_all" value="1" type="checkbox">
          <input name="selection_all2" value="1" type="checkbox">
        </th>
        <th>ID</th>
        <th>Name</th>
      </tr>
      <tr id="w3-filters">
        <td>&nbsp;</td>
        <td><input name="PostSearch[id]" type="text"></td>
        <td><input name="PostSearch[name]" type="text"></td>
      </tr>
    </thead>
    <tbody>
      <tr data-key="1">
        <td>
          <input class="w3-check-row" name="selection[]" value="1" type="checkbox">
          <input name="selection2[]" value="1" type="checkbox">
        </td>
        <td>1</td>
        <td>Name 1</td>
      </tr>
      <tr data-key="2">
        <td>
          <input class="w3-check-row" name="selection[]" value="2" type="checkbox">
          <input name="selection2[]" value="2" type="checkbox">
        </td>
        <td>2</td>
        <td>Name 2</td>
      </tr>
    </tbody>
  </table>
</div>
